<template>
    <!-- 顶部返回 -->
    <div class="title">
        <div class="back" @click="router.go(-1)">
            <img class="auto-img1" src="@/assets/icon/ds.png" alt="">
        </div>
        <div></div>
    </div>
    <!-- 大图 -->
    <div class="albumPics">
        <img class="auto-img" :src="commodity.item.albumPics ? commodity.item.albumPics[0] : ''" alt="">
    </div>
    <!-- 主要内容 -->
    <div class="cont">
        <!-- 价格,名 -->
        <div class="cont-item">
            <div class="price">￥{{ commodity.item.promotionPrice }}</div>
            <p>{{ commodity.item.name }}</p>
            <div class="sold">已售3.3万+份</div>
            <div class="service">
                <div class="service-icon">服务</div>
                <div class="service-list">
                    过期自动退 随时退 免预约 推荐自提
                </div>
            </div>
        </div>
        <!-- 鱼乐卡 -->
        <div class="cont-card">
            <div class="cont-card-left">
                <div class="cont-card-icon"></div>
                <div class="cont-card-text">升级会员即可参与购买</div>
            </div>
            <div class="cont-card-right">
                <p>立即升级</p>
                <div></div>
            </div>

        </div>
        <!-- 发货 -->
        <div class="cont-card">
            <div class="cont-card-left">
                <div class="cont-card-text">发货</div>
            </div>
            <div class="cont-card-right">
                <span>到店自提: 电子兑换卷</span>
            </div>

        </div>
        <!-- 详情 -->
        <div class="cont-details">
            <img class="auto-img2"
                :src="commodity.item.productDetailImgUrlList ? commodity.item.productDetailImgUrlList[0].imgUrl : ''"
                alt="">
        </div>
        <!-- 购买须知 -->
        <div class="cont-details">
            <img class="auto-img2" :src="commodity.item.productBuyNotice" alt="">
        </div>
    </div>

    <!-- 底部购物车,下单 -->
    <div class="Submit">
        <div class="Shopping-cart" @click="showBottom = true">
            <div v-if="nums >= 1" class="Shopping-cart-num">{{ nums }}</div>
        </div>
        <div class="Shopping-in">
            <div class="Shopping-in-cart" @click="addShop(commodity.item.promotionPrice, commodity.item.name)">加入购物车
            </div>
            <div class="Shopping-buy">立即购买</div>
        </div>
    </div>
    <!-- 弹出层 -->
    <div v-if="nums > 0">
        <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '30%' }">
            <div class="shopCart">
                <div class="shopCart-item">
                    <ul>
                        <li class="shopCart-list" v-for="(item, inex) in shopCart.item">
                            <p>{{ item.name }}</p>
                            <p>{{ item.num }}</p>
                        </li>
                    </ul>
                </div>
                <div class="shopCart-price">
                    <div></div>
                    <p>合计: ￥{{ allPrice }}</p>
                </div>
            </div>
        </van-popup>
    </div>
    <div v-if="nums == 0">
        <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '30%' }">
            <div class="noshopCart">
                <div class="noshopCartImg">
                    <img class="auto-img" src="@/assets/background/8a.png" alt="">
                </div>
                <p>购物车是空的</p>
            </div>
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getproductDetails } from '@/api/api'
//引入pinia
import { storeToRefs } from "pinia"
//引入pinia文件
import { shopList } from "@/stores/counter"

//使用pinia
const store = shopList()  //使用公开的方法
let { UserShopList } = storeToRefs(store)  //拿到方法里定义的值

const router = useRouter()
const route = useRoute()

//购物车数量
const nums = ref(0)

//总价
const allPrice = ref(0)

//商品信息
const commodity = reactive<{ item: any }>({
    item: {}
})

//购物车内容
const shopCart = reactive<{ item: any }>({
    item: []
})

//添加购物车
function addShop(price: number, name: string) {
    let kk = JSON.parse(JSON.stringify(UserShopList.value))
    console.log('kk', kk);

    shopCart.item = kk;
    let newObj = {
        price,
        name,
        num: 1
    }
    if (shopCart.item.length == 0) {
        shopCart.item.push(newObj)
    } else {
        let flag = false;
        let index = -1
        for (let i = 0; i < shopCart.item.length; i++) {
            if (shopCart.item[i].name == newObj.name) {
                flag = true
                index = i
            }
        }
        if (flag) {
            shopCart.item[index].num += 1
        } else {
            shopCart.item.push(newObj)
        }
    }
    //存
    store.$patch((state) => {
        state.UserShopList = shopCart.item
    })

    //重新更新购物车数量
    let allnum = 0
    for (let i = 0; i < shopCart.item.length; i++) {
        allnum += shopCart.item[i].num
    }
    nums.value = allnum

    //总价
    if (shopCart.item.length == 1) {
        allPrice.value = price * shopCart.item[0].num
    } else if (shopCart.item.length >= 2) {
        allPrice.value = 0
        for (let i = 0; i < shopCart.item.length; i++) {
            allPrice.value += shopCart.item[i].price * shopCart.item[i].num
        }
    }


}

//购物车隐藏开关
const showBottom = ref(false)
//购物车弹出层
const show = ref(false);
const showPopup = () => {
    show.value = true;
};

onMounted(() => {
    shopCart.item = JSON.parse(JSON.stringify(UserShopList.value))
    let allnum = 0
    if (shopCart.item.length == 1) {
        allnum += shopCart.item[0].num
        nums.value = allnum
    } else if (shopCart.item.length >= 2) {
        for (let i = 0; i < shopCart.item.length; i++) {
            allnum += shopCart.item[i].num
        }
        nums.value = allnum
    }


    if (route.query.vid) {
        let vid = route.query.vid
        getproductDetails(vid).then((res) => {
            console.log('res', res);
            commodity.item = res.data
        })
    }

})
</script>

<style lang="less" scoped>
.auto-img {
    width: 100%;
    height: 100%;
    display: block;
}

.auto-img1 {
    // width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    transform: rotate(180deg) scale(.6);
    transform-origin: 6px 12px;
}

.auto-img2 {
    width: 100%;
    display: block;
}

.title {
    position: fixed;
    top: 25px;
    left: 0;
    right: 0;
    padding: 0 10px;
    z-index: 10;

    .back {
        width: 25px;
        height: 25px;
        background-color: rgba(0, 0, 0, .2);
        border-radius: 999px;
    }
}

.albumPics {
    height: 377px;
    background-color: black;
}

.cont {
    background-color: #f8f8fa;
    padding: 10px 10px;

    .cont-item {
        background-color: white;
        border-radius: 10px;
        padding: 10px 10px;

        .price {
            font-size: 16px;
            font-weight: 800;
            color: #df7114;
        }

        p {
            font-weight: 600;
        }

        .sold {
            font-size: 12px;
            color: #ababab;
            transform: scale(.8);
            transform-origin: 0 0;
        }

        .service {
            display: flex;
            align-items: center;
            font-size: 12px;

            .service-icon {
                padding: 0 7px;
                background-color: #d2d8fa;
                border-radius: 999px;
                color: #7e8cde;
                transform: scale(.8);
                transform-origin: 0 10px;
            }
        }
    }

    .cont-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: white;
        margin: 10px 0;
        font-size: 13px;
        padding: 10px 10px;
        border-radius: 10px;

        .cont-card-left {
            display: flex;
            align-items: center;

            .cont-card-icon {
                height: 20px;
                width: 70px;
                margin: 0 5px;
                background-image: url('@/assets/icon/iU1.png');
                background-size: cover;
            }

            .cont-card-text {
                font-size: 12px;
                color: #8d8d8d;
                transform-origin: 0 15px;
                transform: scale(.9);
            }
        }


        .cont-card-right {
            color: #a0773f;
            display: flex;
            align-items: center;
            font-size: 12px;

            div {
                width: 10px;
                height: 10px;
                background-image: url('@/assets/icon/T-.png');
                background-size: cover;
                transform: rotate(180deg);
            }

            span {
                color: black;
            }
        }
    }

    .cont-details {
        background-color: white;
        border-radius: 10px;
        margin: 10px 0;
        padding: 10px 10px;
        border-radius: 10px;
    }
}

.Submit {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .Shopping-cart {
        width: 20px;
        height: 20px;
        background-size: cover;
        background-image: url('@/assets/icon/i1.png');
        position: relative;

        .Shopping-cart-num {
            position: absolute;
            right: -7px;
            top: -7px;
            width: 15px;
            height: 15px;
            background-color: #e4393c;
            border-radius: 999px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
        }
    }

    .Shopping-in {
        display: flex;
        align-items: center;
        font-size: 13px;

        .Shopping-in-cart {
            color: #5d6ed5;
            padding: 4px 20px;
            border-radius: 999px;
            border: 1px solid #5d6ed5;
            margin: 0 5px;
        }

        .Shopping-buy {
            color: white;
            padding: 4px 20px;
            border-radius: 999px;
            background-color: #5d6ed5;
            margin: 0 5px;
        }
    }
}

.shopCart {
    padding: 10px;

    .shopCart-item {
        .shopCart-list {
            height: 30px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            p {
                font-size: 12px;
            }
        }
    }

    .shopCart-price {
        display: flex;
        justify-content: space-between;
    }
}

.noshopCart {
    height: 100%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8fa;

    .noshopCartImg {
        width: 150px;
        height: 120px;
    }
}
</style>